﻿.box {
    text-align: center;
    overflow: hidden;
    position: relative;
}

    .box:before {
        content: "";
        width: 0;
        height: 100%;
        background: #000;
        padding: 14px 18px;
        position: absolute;
        top: 0;
        left: 50%;
        opacity: 0;
        transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    }

    .box:hover:before {
        width: 100%;
        left: 0;
        opacity: 0.5;
    }

    .box img {
        width: 100%;
        height: auto;
    }

    .box .box-content {
        width: 100%;
        padding: 14px 18px;
        color: #fff;
        position: absolute;
        top: 38%;
        left: 0;
    }

    .box .title {
        font-size: 25px;
        font-weight: 600;
        line-height: 30px;
        text-transform: uppercase;
        margin: 0;
        opacity: 0;
        transition: all 0.5s ease 0s;
        background-color: transparent;
        height: 40px;
        padding: 0;
    }

    .box .post {
        font-size: 15px;
        text-transform: capitalize;
        opacity: 0;
        transition: all 0.5s ease 0s;
    }

    .box:hover .title,
    .box:hover .post {
        opacity: 1;
        transition-delay: 0.7s;
    }

    .box .icon {
        padding: 0;
        margin: 0;
        list-style: none;
        margin-top: 15px;
    }

        .box .icon li {
            display: inline-block;
        }

            .box .icon li a {
                display: block;
                width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 50%;
                background: #f74e55;
                font-size: 20px;
                font-weight: 700;
                color: #fff;
                margin-right: 5px;
                opacity: 0;
                transform: translateY(50px);
                transition: all 0.5s ease 0s;
            }

    .box:hover .icon li a {
        opacity: 1;
        transform: translateY(0px);
        transition-delay: 0.5s;
    }

    .box:hover .icon li:last-child a {
        transition-delay: 0.8s;
    }

@media only screen and (max-width:990px) {
    .box {
        margin-bottom: 30px;
    }
}
